<template>
  <!-- element中的容器组件 -->
  <el-container>
    <el-header>
        <el-row>
            <el-col :span="6" :offset="18">
                <el-dropdown @command="CommandHandle" trigger="click">
                <span class="el-dropdown-link">
                    欢迎:王旭<i class="el-icon-arrow-down"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <!-- command 当点击这个下拉框的时候触发的回调函数。 -->
                    <!-- 该回调函数用来记录当前用户点击的是哪一个选项 -->
                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                    <el-dropdown-item command="setting">设置</el-dropdown-item>
                </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>
    </el-header>

    <!-- 该容器主要存放侧边栏内容 -->
    <el-container>
        <el-aside width="200px">
            <MenuBar></MenuBar>
        </el-aside>

    <el-container>
        <!-- 容器的身体 -->
        <el-main>
            <!-- 路由出口 -->
            <router-view></router-view>
        </el-main>
        <el-footer>我是网页的尾部</el-footer>
    </el-container>

    </el-container>
  </el-container>
</template>

<script>
import MenuBar from '../components//MenuBar.vue'
export default {
    data() { // 初始数据处理
        return {
            
        }
    },
    methods: { // 事件处理
      async CommandHandle(command) {
          if(command === 'logout') { // 说明用户点击的是退出按钮
            console.log('用户退出了');
            let res = await this.$http.get('/api/user/logout')
            console.log(res);
            if(res.data.code === 1) {
              // 说明退出成功了,需要把用户信息清空  session清空
              sessionStorage.removeItem('username')
              // 提示框  来自elementui
              this.$message.success(res.data.message)
              // 跳转页面
              this.$router.replace('/login')
            }
          }else if(command === 'setting'){
            console.log('我是设置');
          }
        }
    },
    // 渲染子组件
    components:{
        MenuBar
    }
};
</script>

<style scoped>
.home-container {
  height: 100%;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  /* text-align: center;
    line-height: 200px; */
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
